<html>
<head>

	<style>
		.prototype_header {
			font-family: Tahoma;
			
			width: 800px;
			margin: auto;
			margin-bottom: 0px;
			padding: 10px 10px;
			background: #6686B4;
			color: white;
		}
		
		.prototype_description {
			font-family: Tahoma;
			font-weight: normal;
			font-size: 16px;
			
			width: 800px;
			margin: auto;
			margin-bottom: 20px;
			padding: 10px 10px;
			background: transparent;
			color: black;
		}
		
		.prototype_header h1 {
			font-size: 16px;
			font-weight: bold;
			margin: 0 0;
			padding: 0 0;
		}
		.prototype_header h2 {
			font-size: 14px;
			font-weight: normal;
			padding: 0 0;
			margin: 0 0;
		}
		.prototype_header h3 {
			font-size: 12px;
			font-weight: normal;
			padding: 0 0;
			margin: 0 0;
		}
		
		.feedback_container {
			position: fixed;
			bottom: 0px;
			/*right: 10%;
			left: 10%;*/
			z-index: 100;
		}
		
		.feedback_tab {
			font-family: Tahoma;
			font-size: 12px;
			padding: 6px 8px;
			width: 100px;
			height: 20px;
		
			background: red;
			color: white;
		}
		
		.feedback_form {
			font-family: Tahoma;
			font-size: 12px;
			padding: 6px 8px;
			background: red;
			color: white;
		}
		
		textarea.feedback {
			width: 300px;
			height: 100px;
		}
		
		.comments_tab {
			font-family: Tahoma;
			font-size: 12px;
			padding: 6px 8px;
			width: 100px;
			height: 20px;
			
			background: #6686B4;
			color: white;
			
			position: fixed;
			bottom: 0px;
			left: 130px;
			z-index: 90;
		}
		
		.comments_container {
			margin: auto;
			width: 800px;
			padding: 10px 10px;
			font-family: Tahoma;
			background: #6686B4;
			color: white;
		}
		
		.comments_header {
			margin: auto;
			margin-top: 100px;
			width: 800px;
			padding: 10px 10px;
			font-family: Tahoma;
			background: #6686B4;
			color: white;
			font-weight: bold;
		}
		
		.comment_text {
			font-size: 12px;
		}
		
		.comment_from {
			padding: 0 0;
			display: inline;
			font-size: 12px;
			color: #aacaf8;
		}
		
		.comment_date {
			padding: 0 0;
			display: inline;
			font-size: 12px;
			color: #aacaf8;
		}
	</style>
	
	<script src="../lib/jquery.js"></script>
	<script src="../lib/jquery-ui.min.js"></script>
	<script src="../lib/jquery.template.js"></script>
	<script src="../lib/json2.js"></script>
	
	<script src="feedback.js"></script>
	<script>
	
		function object_elementsLoaded() {
			loadComments();
			setupGuiEvents();
		}
		
		function setupGuiEvents() {
			$(".prototype_header").click(function() {
				$(".prototype_header").fadeOut(500);
				$(".comments_container").fadeOut(500);
				$(".comments_header").fadeOut(500);
				$(".prototype_description").fadeOut(500);
				
				//$(".comments_tab").fadeIn(500);
				$(".comments_tab").html("Show Comments");
			});
			
			$(".comments_container").click(function() {
				$(".prototype_header").fadeOut(500);
				$(".comments_container").fadeOut(500);
				$(".comments_header").fadeOut(500);
				$(".prototype_description").fadeOut(500);
				
				//$(".comments_tab").fadeIn(500);
				$(".comments_tab").html("Show Comments");
			});
			
			$(".comments_tab").click(function() {
				if ( $(".comments_tab").html() == "Hide Comments" ) {
					$(".prototype_header").fadeOut(500);
					$(".comments_container").fadeOut(500);
					$(".comments_header").fadeOut(500);
					$(".prototype_description").fadeOut(500);
					
					//$(".comments_tab").fadeIn(500);
					$(".comments_tab").html("Show Comments");
				} else {
					$(".prototype_header").fadeIn(500);
					$(".comments_container").fadeIn(500);
					$(".comments_header").fadeIn(500);
					$(".prototype_description").fadeIn(500);
					
					//$(".comments_tab").fadeOut(500);
					$(".comments_tab").html("Hide Comments");
				}
			});
			//$(".comments_tab").hide();
		}
	
		$(function() {
		
			setupGuiEvents();
		
			initFeedback();
			//loadComments();
		
		});
	
	</script>

</head>

<body>


</body>
</html>